<template>
  <div slot="content">
    <cube-tab-bar
      v-model="selectedLabel"
      show-slider
      :use-transition="disabled"
      ref="tabNav"
      :data="tabLabels"
    ></cube-tab-bar>
    <div class="tab-slide-container">
      <cube-slide
        ref="slide"
        :loop="loop"
        :auto-play="autoPlay"
        :show-dots="showDots"
        :options="slideOptions"
        @change="changePage"
        :initialIndex="index"
      >
        <!-- 关注 -->
        <cube-slide-item>
          <cube-scroll-nav
            :side="true"
            :data="data"
            :current="current"
            @change="changeHandler"
            @sticky-change="stickyChangeHandler"
            style="height:500px;"
          >
            <cube-scroll-nav-panel
              v-for="item in data"
              :key="item.name"
              :label="item.name"
              :title="item.name"
            >
              <ul>
                <li v-for="food in item.foods" :key="food.name">
                  <div>
                    <img :src="food.icon" width="57" height="57" />
                    <p>{{food.name}}</p>
                    <span>{{food.a}}</span>
                  </div>
                </li>
              </ul>
            </cube-scroll-nav-panel>
          </cube-scroll-nav>
        </cube-slide-item>
        <!-- 推荐 -->
        <cube-slide-item>2</cube-slide-item>
        <cube-slide-item>3</cube-slide-item>
      </cube-slide>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import goodsData from "./goodsList.json";
const goods = goodsData.goods;
export default {
  data() {
    return {
      data: goods,
      current: goods[3].name,
      disabled: false,
      tabLabels: [
        {
          label: "点餐"
        },
        {
          label: "评价"
        },
        {
          label: "商家"
        }
      ],
      index: 0,
      loop: false,
      autoPlay: false,
      showDots: false,
      slideOptions: {
        listenScroll: true,
        probeType: 3,
        /* lock y-direction when scrolling horizontally and  vertically at the same time */
        directionLockThreshold: 0
      },
      scrollOptions: {
        /* lock x-direction when scrolling horizontally and  vertically at the same time */
        directionLockThreshold: 0
      }
    };
  },
  methods: {
    changePage(current) {
      this.selectedLabel = this.tabLabels[current].label;
      window.console.log(current);
    },
    changeHandler(label) {
      window.console.log("changed to:", label);
    },
    stickyChangeHandler(current) {
      window.console.log("sticky-change", current);
    }
  },
  computed: {
    selectedLabel: {
      get() {
        return this.tabLabels[this.index].label;
      },
      set(narVal) {
        this.index = this.tabLabels.findIndex(value => {
          return value.label === narVal;
        });
      }
    }
  },
  components: {}
};
</script>


<style scoped>
</style>